import { List, message, Popconfirm, Space, Modal, Row, Col, Table, Input, Checkbox, Tooltip, Radio, Card, Image as AntdImage } from "antd";
import { useModel, Outlet, useLocation, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, Descriptions } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle, IconDelete, IconEdit, IconEyeOpened, IconChainStroked } from "@douyinfe/semi-icons";
import { AppstoreOutlined, MenuOutlined, QrcodeOutlined } from "@ant-design/icons";
import { useReactive } from "ahooks";
import { useEffect, useState } from "react";

import useHelperBrand from "../helper/useHelperBrand";
import useAllBrands from "../hooks/brand/useAllBrands";
import useDeleteBrand from "../hooks/brand/useDeleteBrand";

import useCommoditiesFromBrand from "../hooks/commodities/useCommoditiesFromBrand";

const BrandManagementPage = () => {
	const { windowInnerHeight } = useModel("global");
	const { openCreateBrandModal, openEditBrandModal } = useHelperBrand();
	const { loading, brands, loadAllBrands } = useAllBrands();
	const { deleteBrand } = useDeleteBrand();

	const state = useReactive({
		showFormat: "list", // list table
		selectedBrand: null,
	});

	useEffect(() => {
		!state.selectedBrand && brands?.length > 0 && (state.selectedBrand = brands[0]);
	}, [brands]);

	const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

	return (
		<div style={{ padding: 10 }}>
			<Row gutter={10}>
				<Col span={5}>
					<SemiCard
						title={<span style={{ lineHeight: "32px", fontSize: 15 }}>品牌列表</span>}
						headerStyle={{ padding: "7px 12px" }}
						shadows="always"
						bordered={false}
						size="default"
						bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
						headerExtraContent={
							<ButtonGroup>
								<Button icon={<IconPlusCircle />} onClick={() => openCreateBrandModal({ reloadData: loadAllBrands })} />
								<Button icon={<IconRefresh />} onClick={loadAllBrands} />
							</ButtonGroup>
						}
					>
						<List
							loading={loading}
							dataSource={brands}
							size="small"
							style={{ padding: 1 }}
							renderItem={(item) => {
								return (
									<List.Item
										className={`list-item ${state.selectedBrand?.ccName === item.ccName ? "list-item-selected" : ""}`}
										onClick={() => (state.selectedBrand = item)}
										extra={
											<Space className="bnts" size={0}>
												<Button theme="borderless" icon={<IconEdit />} onClick={() => openEditBrandModal({ reloadData: loadAllBrands, brand: item })} />
												<Button
													theme="borderless"
													icon={<IconDelete style={{ color: "#E91E63" }} />}
													onClick={() =>
														deleteBrand(item, (res) => {
															if (res) {
																message.success("成功删除合作品牌");
																loadAllBrands();
															}
														})
													}
												/>
											</Space>
										}
									>
										<List.Item.Meta title={item.ccName} description={item.ccdesc} />
									</List.Item>
								);
							}}
						/>
					</SemiCard>
				</Col>

				<Col span={19}>
					<SemiCard
						title={<span style={{ lineHeight: "32px", paddingLeft: 10, fontSize: 16, fontWeight: 600 }}>品牌信息</span>}
						headerStyle={{ padding: "7px 12px" }}
						shadows="always"
						bordered={false}
						size="default"
						bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
						headerExtraContent={
							<Space>
								<ButtonGroup>
									<Button icon={<AppstoreOutlined />} theme={state.showFormat === "list" ? "solid" : "light"} onClick={() => (state.showFormat = "list")}></Button>
									<Button icon={<MenuOutlined />} theme={state.showFormat === "table" ? "solid" : "light"} onClick={() => (state.showFormat = "table")} />
								</ButtonGroup>
							</Space>
						}
					>
						<BradCommdities showFormat={state.showFormat} selectedBrand={state.selectedBrand} />
					</SemiCard>
				</Col>
			</Row>
		</div>
	);
};

const BradCommdities = ({ showFormat, selectedBrand }) => {
	const { commodities, totalCount, loading, loadCommoditiesFromBrand } = useCommoditiesFromBrand();

	useEffect(() => {
		selectedBrand && loadCommoditiesFromBrand(selectedBrand);
	}, [selectedBrand]);

	if (showFormat === "list") {
		const cardTitle = (
			<div style={{ display: "flex", justifyContent: "space-between" }}>
				<div>商品编码</div>
				<div>
					<a>
						<QrcodeOutlined style={{ fontSize: 20 }} />
					</a>
				</div>
			</div>
		);

		return (
			<List
				loading={loading}
				grid={{ gutter: 20, xs: 2, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }}
				dataSource={commodities}
				style={{ padding: 20 }}
				renderItem={(item) => {
					return (
						<List.Item>
							<Card
								size="small"
								hoverable
								style={{ width: "100%" }}
								title={cardTitle}
								cover={
									<div style={{ marginTop: 10, width: 120, marginLeft: "auto", marginRight: "auto" }}>
										<AntdImage preview width={120} height={120} src={"https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"} />
									</div>
								}
								actions={[<a>详情</a>, <a>编辑</a>, <Popconfirm title="确认要删除该服务项目信息吗？">删除</Popconfirm>]}
							>
								<Card.Meta style={{ textAlign: "center" }} title={"商品名称"} description={<div>￥{11.11}</div>} />
							</Card>
						</List.Item>
					);
				}}
			/>
		);
	}

	if (showFormat === "table") {
		let actions = (_, r, i) => (
			<Space size={0}>
				<Button theme="borderless">编辑</Button>
				<Button theme="borderless">删除</Button>
			</Space>
		);
		return (
			<Table size="small" dataSource={commodities} bordered pagination={false}>
				<Table.Column title="序号" width={60} align="center" render={(_, r, i) => i + 1} />
				<Table.Column title="图片" width={100} align="center" />
				<Table.Column title="商品名称" align="left" />
				<Table.Column title="品牌" width={160} align="center" />
				<Table.Column title="规格型号" width={200} align="left" />
				<Table.Column title="单位" width={80} align="center" />
				<Table.Column title="存货数量" width={100} align="center" />
				<Table.Column title="存货均价" width={120} align="right" />
				<Table.Column title="存货金额" width={120} align="right" />
				<Table.Column title="操作" width={200} align="center" render={actions} />
			</Table>
		);
	}

	return <></>;
};

export default BrandManagementPage;
